import React, { useEffect, useState } from 'react'
import { Button, Row, Col, Image, Typography, Empty, Tabs, Spin, Statistic } from 'antd'
import Header from '@/components/header/header'
import ListItem from '@/components/list-item/list-item'
import {
  EnvironmentOutlined,
  IdcardOutlined,
  ManOutlined,
  WomanOutlined,
  MobileOutlined
} from '@ant-design/icons'
import articlesModel from '../model/articles'
import UserFans from '../user-fans'
import UserFollowers from '../user-followers'
import userInfoModel from '../model/user-info'
import { useRouter } from 'next/router'
import { storage } from '@/utils/utils'
import { useImmer } from 'use-immer'
import styles from '@/styles/userInfo.module.scss'
import noData from '@/public/images/no-data.svg'
const { Title } = Typography
const { TabPane } = Tabs

function UserInfo () {
  const router = useRouter()
  const [releaseListData, setReleaseListData] = useImmer([])
  const [likeListData, setLikeListData] = useImmer([])
  const [collectlistData, setCollectListData] = useImmer([])
  const [commentListData, setCommentListData] = useImmer([])
  const [userInfo, setUserInfo] = useState()
  const [loading, setLoading] = useState(false)
  useEffect(() => {
    setLoading(true)
    userInfoModel.getUserInfoDeatil({
      data: {
        id: JSON.parse(storage.get('next_blog_userInfo'))?.id
      }
    }).then(({datas}) => {
      if (datas) {
        setUserInfo(datas)
        setLoading(false)
      }
      
    })
  }, [])
  useEffect(() => {
    articlesModel.getArticlePageList({
      data: {
        id: JSON.parse(storage.get('next_blog_userInfo'))?.id
      }
    }).then(({datas}) => {
      if (datas && datas.list) {
        datas.list.length && datas.list.forEach(item => {
          if (item.userId === JSON.parse(storage.get('next_blog_userInfo'))?.id) setReleaseListData(data => {
            data.push(item)
          })
          if (item.likeStatus) setLikeListData(data => {
            data.push(item)
          })
          if (item.collectStatus) setCollectListData(data => {
            data.push(item)
          })
          if (item.commentStatus) setCommentListData(data => {
            data.push(item)
          })
        })
      }
    })
  }, [])
  
  return (
    <div className={styles.page} id="info">
      <Header />
      <Spin spinning={loading}>
        {
          userInfo ? <>
            <Row justify="center" style={{marginTop: 25}}>
              <Col span={16}>
                <div className={styles.info_box} id="infoBox" >
                  <Image preview={false} style={{objectFit: 'cover'}} width="100%" height={240} src={userInfo.coverUrl}></Image>
                  <div style={{height: 94, margin: 24, marginLeft: 220}}>
                    <Title level={2}>{userInfo.username}</Title>
                    <div className={styles.info}>
                      <span className={styles.item}><EnvironmentOutlined></EnvironmentOutlined> {userInfo.city}</span>
                      <span className={styles.item}><IdcardOutlined /> {userInfo.job}</span>
                      <span className={styles.item}>{userInfo.gender === '女' ? <WomanOutlined /> : <ManOutlined />} {userInfo.gender}</span>
                      <span className={styles.item}><MobileOutlined /> {userInfo.iphone.substr(0, 3) + '****' + userInfo.iphone.substr(7)}</span>
                    </div>
                    <Button className={styles.btn} type="primary" onClick={() => router.push('/updateInfo')} ghost>编辑个人资料</Button>
                  </div>
                  <div style={{position: 'absolute', bottom: 25, left: 25, width: 160, height: 160}}>
                    <Image width={160} preview={false} height={160} style={{border: '4px solid #fff', borderRadius: 10}} src={userInfo.avatar}> </Image>
                  </div>
                  
                </div>
              </Col>
            </Row>
            <Row justify="center" >
              <Col span={16}>
                <div className={styles.content}>
                  <div className={styles.left} id="contentLeft">
                    <Tabs defaultActiveKey="1">
                      <TabPane tab="发布" key="1">
                        {releaseListData.length > 0 ?
                          <>
                            {releaseListData.map((item, index) => <ListItem isMe={true} key={index} data={item} />)}
                          </>
                          :
                          <Empty
                          // 这是个坑 noData是一个对象 {src, height, width}
                            image={noData.src}
                            imageStyle={{
                              height: 100,
                            }}
                            description={
                              <span style={{color: '#808795'}}>暂无数据</span>
                            }
                          >
                          </Empty>
                        }
                      </TabPane>
                      <TabPane tab="点赞" key="2">
                        {likeListData.length > 0 ?
                          <>
                            {likeListData.map((item, index) => <ListItem key={index} data={item} />)}
                          </>
                          :
                          <Empty
                          // 这是个坑 noData是一个对象 {src, height, width}
                            image={noData.src}
                            imageStyle={{
                              height: 100,
                            }}
                            description={
                              <span style={{color: '#808795'}}>暂无数据</span>
                            }
                          >
                          </Empty>
                        }
                      </TabPane>
                      <TabPane tab="收藏" key="3">
                        {collectlistData.length > 0 ?
                          <>
                            {collectlistData.map((item, index) => <ListItem key={index} data={item} />)}
                          </>
                          :
                          <Empty
                          // 这是个坑 noData是一个对象 {src, height, width}
                            image={noData.src}
                            imageStyle={{
                              height: 100,
                            }}
                            description={
                              <span style={{color: '#808795'}}>暂无数据</span>
                            }
                          >
                          </Empty>
                        }
                      </TabPane>
                      <TabPane tab="评论" key="4">
                        {commentListData.length > 0 ?
                          <>
                            {commentListData.map((item, index) => <ListItem key={index} data={item} />)}
                          </>
                          :
                          <Empty
                          // 这是个坑 noData是一个对象 {src, height, width}
                            image={noData.src}
                            imageStyle={{
                              height: 100,
                            }}
                            description={
                              <span style={{color: '#808795'}}>暂无数据</span>
                            }
                          >
                          </Empty>
                        }
                      </TabPane>
                      <TabPane tab="关注" key="5" style={{padding: '0 25px'}}>
                        <Tabs defaultActiveKey="6" destroyInactiveTabPane={true} type="card" tabBarGutter={15} size="small">
                          <TabPane tab="我关注的人" key="6">
                            <UserFollowers id={JSON.parse(storage.get('next_blog_userInfo'))?.id}></UserFollowers>
                          </TabPane>
                          <TabPane tab="关注我的人" key="7">
                            <UserFans id={JSON.parse(storage.get('next_blog_userInfo'))?.id}></UserFans>
                          </TabPane>
                        </Tabs>
                      </TabPane>
                    </Tabs>
                  </div>
                  <div className={styles.right} id="contentRight">
                    <div className={styles.number}>
                      <Statistic title="粉丝" value={userInfo.fansTotal} />
                    </div>
                    <div className={styles.number}>
                      <Statistic title="关注" value={userInfo.followersTotal} />
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
          </>
            :
            <div style={{marginTop: 80}}></div>
        }
        
      </Spin>
    </div>
  )
}

export default  UserInfo